<template>
<div class="goodsEvaluationList">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
    </template>
    <el-form :model="model">
      <el-form-item label="订单号:">
        <el-input v-model="model.orderSn" clearable></el-input>
      </el-form-item>
      <el-form-item label="商品名称:">
        <el-input v-model="model.productName" clearable></el-input>
      </el-form-item>
      <el-form-item label="下单人:">
        <el-input v-model="model.memberName" clearable></el-input>
      </el-form-item>
      <el-form-item label="星级:">
        <el-select v-model="model.starLevel" clearable>
          <el-option v-for="item in [1,2,3,4,5]" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="starLevel" label="评价星级" align="center" header-align="center" width="160">
      <template v-slot="{row}">
        <el-rate
          v-model="row.starLevel"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}">
        </el-rate>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="260" fixed="right">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button size="mini" @click="showDetails(row)">查看订单</el-button>
          <el-button type="primary" size="mini" @click="replyEvaluation(row)">评价回复</el-button>
          <el-popconfirm
              title="是否确认删除该评价？"
              @confirm="delEvaluate(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <el-drawer
    :visible.sync="viewForms.showForm"
    title="订单详情"
    :size="1000"
    destroy-on-close>
    <goods-order-info
      v-if="viewForms.currentForm && viewForms.currentForm.id"
      :order-id="viewForms.currentForm.orderId"
      is-reply
      @close-drawer="viewForms.showForm = false"
      @refresh="search(false)"
      @evaluate="replyEvaluation(viewForms.currentForm)"></goods-order-info>
  </el-drawer>
  <el-dialog
    :visible.sync="replyForms.showForm"
    title="评价回复"
    :key="refreshKey"
    @closed="closeDialog"
    append-to-body>
    <goods-evaluation-info
      v-if="!!this.replyForms.currentForm"
      ref="goodsEvaluationInfo"
      :model="this.replyForms.currentForm"></goods-evaluation-info>
    <div class="dialog-footer" slot="footer">
      <el-button type="primary" @click="saveReply">保存</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import goodsOrderInfo from "./goodsOrderDetails/goodsOrderInfo";
import GoodsEvaluationInfo from "@/views/goods/goodsEvaluationDetails/goodsEvaluationInfo";
export default {
  name: "goodsEvaluationList",
  components: {GoodsEvaluationInfo, goodsOrderInfo },
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.goods.evaluatePage,
        param: this.model
      }
    }
  },
  data(){
    return {
      refreshKey: 0,
      model: {
        orderSn: '',
        productName: '',
        memberName: '',
        starLevel: ''
      },
      columns: [
        {
          label: '订单号',
          prop: 'orderSn',
          width: 150
        },
        {
          label: '商品名称',
          prop: 'productName',
          minWidth: 175
        },
        {
          label: '下单人',
          prop: 'memberName',
          minWidth: 80
        },
        {
          template: true,
          prop: 'starLevel'
        },
        {
          label: '评价正文',
          prop: 'content',
          minWidth: 290
        },
        {
          label: '评价时间',
          prop: 'createTime',
          formatter(row){
            return (row.createTime || '').replace('T', ' ');
          },
          minWidth: 180
        },
        {
          label: '是否回复',
          prop: 'replyStatus',
          width: 80,
          formatter(row){
            if(row.replyStatus === 0) return '未回复';
            if(row.replyStatus === 1) return '已回复';
            return ''
          }
        }
      ],
      replyForms:{
        currentForm: null,
        showForm: false,
      },
      viewForms:{
        currentForm: {},
        showForm: false,
      }
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    showDetails(row){
      this.$set(this.viewForms, 'currentForm', row);
      this.viewForms.showForm = true;
    },
    replyEvaluation(row){
      this.$yAxios({
        url: this.$api.goods.queryEvaluate,
        data:{
          id: row.id
        },
        loading: true
      }, info => {
        this.replyForms.currentForm = Object.assign(info, Object.gain(row, ['id', 'orderSn', 'productName', 'replyId'], ''));
        if(this.replyForms.currentForm.replyContent === null){
          this.replyForms.currentForm.replyContent = '';
        }
        this.replyForms.showForm = true;
      })
    },
    saveReply(){
      this.$refs['goodsEvaluationInfo'].submit((function(){
        this.search();
        this.replyForms.showForm = false;
      }).bind(this));
    },
    closeDialog(){
      this.replyForms.currentForm = null;
      this.refreshKey++;
    },
    delEvaluate(row){
      this.$yAxios({
        url: this.$api.goods.removeEvaluate,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    }
  }
}
</script>

<style scoped>

</style>